<template>
    <div style="background-color: white">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i>后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="id" align="center" label="ID" width="50"></el-table-column>
            <el-table-column prop="username" align="center" label="用户名" width="140"></el-table-column>
            <el-table-column prop="nickname" align="center" label="昵称" width="180"></el-table-column>
            <el-table-column prop="description" align="center" label="描述"></el-table-column>
            <el-table-column prop="email" align="center" label="邮箱"></el-table-column>
            <el-table-column prop="phone" align="center" label="手机号" width="150"></el-table-column>
            <el-table-column  align="center" label="是否启用" width="80">
                <template slot-scope="scope">
                    <!-- active-value="1"开启时的数值  inactive-value="0" 关闭时的数值 -->
                    <el-switch
                            @change="chaneEnable(scope.row)"
                            v-model="scope.row.enable"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            inactive-color="#999">
                    </el-switch>
                </template>

            </el-table-column>
           <el-table-column align="center" label="管理" width="100">
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" icon="el-icon-edit" circle
                               @click="handleEdit(scope.row)"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" circle
                               @click="openDeleteConfirm(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
            }
        },
        methods: {
            /* 更改管理员状态 */
            chaneEnable(admin){
                let  enableText = ["禁用","启用"]
                console.log("chaneEnable...")
                let url = "http://localhost:9081/admin/" + admin.id;
                console.log(admin)
                if (admin.enable == 1){
                    url += "/enable"
                }else{
                    url += "/disable"
                }
                console.log("url=" + url);
                this.axios.create({'headers' : {'Authorization' : localStorage.getItem("jwt")}})
                    .post(url).then((response) => {
                    let responseBody = response.data;
                    console.log(responseBody)
                    if (responseBody.state != 20000) {
                        console.log(responseBody.message)
                        this.$alert(responseBody.message, '操作错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message.error(responseBody.message);
                            }
                        });
                        this.loadAdminList();
                        return;
                    }
                    this.$message.success("将【"+admin.username+"】的状态设置为【"+enableText[admin.enable]+"】")
                })
            },
            /* 删除管理员 */
            handleDelete(admin) {
                //alert("你点击了【"+album.name+"(id="+album.id+")】的删除按钮")
                console.log("handleDelete...id=" + admin.id)
                let url = "http://localhost:9081/admin/" + admin.id + "/delete";
                console.log("url=" + url);
                this.axios.create({'headers' : {'Authorization' : localStorage.getItem("jwt")}})
                    .post(url).then((response) => {
                    let responseBody = response.data;
                    console.log(responseBody)
                    if (responseBody.state != 20000) {
                        console.log(responseBody.message)
                        this.$message.error(responseBody.message)
                        return;
                    }
                    this.$message.success("删除完成")
                    this.loadAdminList();
                })
            },
            /* 编辑管理员 */
            handleEdit(admin) {
                alert("你点击了【" + admin.name + "(id=" + album.id + ")】的编辑按钮")
            },
            /* 获取管理员列表 */
            loadAdminList() {
                console.log("loadAdminList...");
                let url = 'http://176.212.26.22:9090/admins/list';
                console.log("url=" + url)
                this.axios.create({'headers' : {'Authorization' : localStorage.getItem("jwt")}})
                    .get(url).then((response) => {
                    let responseBody = response.data;
                    console.log(responseBody);
                    this.tableData = responseBody.data;
                })
            },
            /* 删除的操作提示 */
            openDeleteConfirm(admin) {
                let  title = "提示";
                let message = '此操作将永久删除【'+admin.username+'】管理员, 是否继续?'
                this.$confirm(message,title, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(admin);
                }).catch(() => {
                    console.log("这个一个取消的事件");
                });
            }


        },
        /* 加载页面时自启动 */
        mounted() {
            console.log("mounted...")
            this.loadAdminList();
        }
    }
</script>

